<template>
  <div>
    <z-paging ref="pagingX">
      <template #top>
        <view class="mx-26">
          <u-search
            placeholder="搜索订单"
            bgColor="#fff"
            v-model="keyword"
            :showAction="false"></u-search>
          <view class="mt-28">
            <up-tabs
              :list="tabs"
              lineColor="#5DBE88"
              lineHeight="4rpx"></up-tabs>
          </view>
        </view>
      </template>
      <view
        class="bg-white rd-15rpx pt-20 px-27 pb-40 mb-20"
        v-for="item in 10"
        :key="item">
        <view class="flex justify-between">
          <view class="flex">
            <u-image
              :src="$sc.loadImg('shop.png')"
              width="32rpx"
              height="30rpx"></u-image>
            <view class="color-#404646 text-30 font-bold ml-20"
              >寿光市洛城街道卫生院</view
            >
          </view>
          <view class="text-26 color-#FA943A">待付款</view>
        </view>
        <view class="my-30">
          <u-gap height="1rpx" bgColor="#e6e6e6"></u-gap>
        </view>
        <view class="flex">
          <u-image
            :src="$sc.loadImg('banner.png')"
            width="200rpx"
            height="200rpx"></u-image>
          <view class="flex-1 text-30 ml-28">
            <view class="color-#333 font-bold">上门打针（1次/1人/1针）</view>
            <view class="color-#666">被服务人：孙媛媛</view>
            <view class="color-#666">服务时间：2025-07-21 下午</view>
            <view class="color-#666">总金额:¥179.8</view>
          </view>
        </view>
        <view class="my-30">
          <u-gap height="1rpx" bgColor="#e6e6e6"></u-gap>
        </view>
        <view class="flex justify-end">
          <view class="flex gap-30rpx">
            <u-button
              plain
              type="primary"
              color="#24C568"
              text="取消订单"
              shape="circle"
              :custom-style="{ height: '70rpx', width: '180rpx' }"></u-button>
            <u-button
              type="primary"
              color="#24C568"
              shape="circle"
              text="去支付"
              :custom-style="{ height: '70rpx', width: '180rpx' }"></u-button>
          </view>
        </view>
      </view>
    </z-paging>
  </div>
</template>

<script setup>
const tabs = [
  { name: "全部" },
  { name: "待付款" },
  { name: "服务中" },
  { name: "已完成" },
  { name: "待评价" },
  { name: "退款/售后" },
];
</script>

<style lang="scss" scoped></style>
